<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		<view style="height: 88rpx;z-index: 9999;"class="flex align-center px-2 position-fixed left-0 top-0 right-0 bg-white">
			<view class="iconfont icon-sousuo position-absolute text-muted" style="left: 30rpx;"></view>
			<input class="flex-1 rounded bg-light" style="padding: 5rpx 0 5rpx 50rpx;" type="text" v-model="seacrchText"
				@confirm="searchEvent" :placeholder="getplaceholder" placeholder-style="color: #CCCCCC;" />
			<text class="pl-2" @click="goBack">取消</text>
		</view>
		<view style="height: 88rpx;"></view>
		<!-- #endif -->
		<template v-if="searchList.length === 0">
			<view class="px-2 my-3 font-md text-light-muted">
				搜索历史
			</view>
			<view class="flex flex-wrap font text-light-muted">
				<view class="border rounded mx-2 my-1 px-2" v-for="item in serchHistory" hover-class="bg-light"
					@click="searchHistoryEvent(item)">{{item}}
				</view>
			</view>
		</template>
		<template v-else>
			<block v-for="(item,index) in searchList" :key="index">
				<commonList :item="item" :index="index" v-if="type === 'post'" @follow='follow'></commonList>
				<topicList :item="item" :index="index" v-else-if="type === 'topic'"></topicList>
				<userList :item="item" :index="index" v-else></userList>
			</block>
			<loadMore v-if="show" :loadMore="loadMore"></loadMore>
		</template>

	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue';
	//话题组件
	import topicList from '@/components/news/topic-list.vue'
	//用户列表组件
	import userList from '@/components/user-list/user-list.vue'
	//加载更多
	import loadMore from '@/components/common/loadmore.vue'
	export default {
		components: {
			commonList,
			topicList,
			userList,
			loadMore
		},
		data() {
			return {
				//输入框的值
				seacrchText: '',
				serchHistory: [],
				searchList: [],
				//搜索什么类型 例如帖子/用户..
				type: '',
				page: 1,
				loadMore: "上拉加载更多",
				show: false,
			}
		},
		//监听原生搜索框输入事件
		onNavigationBarSearchInputChanged(e) {
			this.seacrchText = e.text
		},
		//监听原生搜索按钮点击事件
		onNavigationBarButtonTap(e) {
			//获取按钮索引
			if (e.index === 0) {
				this.searchEvent()

			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getData(true, () => {
				uni.stopPullDownRefresh()
			})
		},
		//上拉加载
		onReachBottom() {
			this.show = true
			if (this.loadMore !== '上拉加载更多') {
				return
			}
			this.getData(false)
			console.log("到底了 - -")
		},
		// #ifndef APP-PLUS
		computed:{
			getplaceholder(){
				let type = '帖子'
				if(this.type === 'post'){
					type = '帖子'
				}else if(this.type === 'topic'){
					type = '话题'
				}else if(this.type === 'user'){
					type = '用户'
				}
				return '搜索'+type
			}
		},
		// #endif
		
		onLoad(e) {
			let historylist = uni.getStorageSync('history')
			if (historylist) {
				this.serchHistory = JSON.parse(historylist)
			}
			if (e.type) {
				this.type = e.type
			}
			let pageTitle = '帖子'
			switch (this.type) {
				case 'post':
					pageTitle = '帖子'
					uni.$on('updateFolloworSurpport', (e) => {
						switch (e.type) {
							case 'follow':
								this.follow(e.user_id)
								break;
							case 'support':
								this.dosupport(e.data)
								break;
							default:
								break;
						}
					})
					break;
				case 'topic':
					pageTitle = '话题'
					break;
				case 'user':
					pageTitle = '用户'
					break;
			}
			// 修改搜索占位
			// #ifdef APP-PLUS
			let currentWebview = this.$mp.page.$getAppWebview();
			let tn = currentWebview.getStyle().titleNView;
			console.log(tn.searchInput.placeholder)
			tn.searchInput.placeholder = '搜索' + pageTitle;
			currentWebview.setStyle({
				titleNView: tn
			})
			// #endif

		},
		onUnload() {
			uni.$off('updateFolloworSurpport', (e) => {})
		},
		methods: {
			// #ifndef APP-PLUS
			goBack(){
				uni.navigateBack({
					delta: 1
				});
			},
			// #endif
			//点击搜索历史
			searchHistoryEvent(item) {
				this.seacrchText = item
				this.searchEvent()
			},
			//点击搜索事件
			searchEvent() {
				//隐藏键盘
				uni.hideKeyboard()
				let index = this.serchHistory.findIndex(v => v === this.seacrchText)
				if (index !== -1) {
					this.$U.__toFirst(this.serchHistory, index)
				} else {
					this.serchHistory.unshift(this.seacrchText)
				}
				uni.setStorageSync('history', JSON.stringify(this.serchHistory))
				this.getData()
			},
			getData(isrefresh = true, callback = false) {
				//loading 动画
				uni.showLoading({
					title: '加载中..',
					mask: false
				})
				this.page = isrefresh ? 1 : this.page + 1
				this.$H.post('/search/' + this.type, {
					keyword: this.seacrchText,
					page: this.page
				}).then(res => {
					if (res.list.length === 0) {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					}
					let list = []
					switch (this.type) {
						case 'post':
							list = res.list.map(v => {
								return this.$U.formatCommonList(v)
							})
							break;
						case 'topic':
							list = res.list.map(v => {
								return {
									id: v.id,
									cover: v.titlepic,
									title: v.title,
									desc: v.desc,
									today_count: v.todaypost_count,
									news_count: v.post_count
								}
							})
							break;
						case 'user':
							list = res.list.map(v => {
								return {
									user_id: v.id,
									avatar: v.userpic ? 'v.userpic' : '/static/default.jpg',
									username: v.username,
									age: v.age,
									sex: v.sex,
									isFollow: false
								}
							})
							break;
					}
					//判断是否为首次加载 首次加载加载page1十条 上拉加载就拼接数组
					this.searchList = isrefresh ? list : [...this.searchList, ...list],
						this.loadMore = list.length < 10 ? '没有更多了' : '上拉加载更多'
					uni.hideLoading()
					if (typeof callback === 'function') {
						callback()
					}
				}).catch(err => {
					uni.hideLoading()
					if (typeof callback === 'function') {
						callback()
					}
				})
			},
			//关注
			follow(e) {
				this.searchList.forEach(v => {
					if (v.user_id === e) {
						v.isFollow = true
					}
				})
				uni.showToast({
					title: '关注成功'
				});
			},
			//顶踩操作
			dosupport(e) {
				console.log(e)
				this.searchList.forEach(item => {
					if (item.id === e.id) {
						if (item.support.type === '') {
							console.log(1)
							item.support.type = e.type
							item.support[e.type + '_count']++
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							item.support.support_count--
							item.support.unsupport_count++
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							item.support.support_count++
							item.support.unsupport_count--
						}
						item.support.type = e.type
					}
				})
				uni.showToast({
					title: e.type === 'support' ? '喜欢' : "不喜欢"
				});
			},
		}
	}
</script>

<style>

</style>
